<template>
  <a-modal v-model:visible="modalVisible" title="下载地址" centered okText="点击复制" cancelText="取消" :maskClosable="false" @ok="onCopy" @cancel="oncancel">
    <a-row class="d-qrcode">
      <a-col :span="8" class="col-one">
        <div class="qrcode">
          <img :src="qrcode()" :title="url" />
        </div>
      </a-col>
      <a-col :span="16" class="col-tow">
        <a-row>
          <a-col :span="8" style="height: 100%">
            <div style="height: 100%">
              <div class="col-tow-img">
                <img :src="img" :title="url" style="width: 100%" />
              </div>
            </div>
          </a-col>
          <a-col :span="16" style="height: 100%" class="col-tow-txt">
            <div :title="name">
              <p>应用名称:{{ name }}</p>
              <p>应用大小:{{ size }}</p>
            </div>
          </a-col>
        </a-row>
        <div>
          <div :title="url" class="col-tow-url">
            下载链接:
            <a-input v-model:value="url" style="width: 73%; height: 30px !important" disabled />
          </div>
        </div>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script lang='ts'>
import { reactive, SetupContext, toRefs } from "vue";
import QRious from "qrious";
import ClipboardJS from "clipboard";
import { $message } from "@/components/AntDesign/message";
export default {
  props: {
    url: String,
    name: String,
    img: String,
    size: String,
    modalVisible: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["oncancel"],
  setup(props: any, ctx: SetupContext) {
    const qrcode = (): string => {
      const qr = new QRious({
        level: "H",
        size: 150,
        background: "rgba(235, 233, 233, 0.3)",
        value: props.url,
      });
      return qr.toDataURL();
    };

    /* 取消事件 */
    function oncancel() {
      ctx.emit("oncancel", false);
    }

    /* 点击复制事件 */
    function onCopy() {
      const clipboard = new ClipboardJS(".ant-btn-primary", {
        text: () => {
          return props.url;
        },
      });
      clipboard.on("success", (e: any) => {
        $message("success", "复制成功");
        ctx.emit("oncancel", false);
        clipboard.destroy();
      });
    }

    return {
      qrcode,
      oncancel,
      onCopy,
    };
  },
};
</script>
<style lang="less" scoped>
.d-qrcode {
  display: flex;
  width: 100%;
  height: 150px;
  .col-one {
    height: 104%;
    overflow: hidden;
    border-radius: 3px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .col-tow {
    color: #000;
    padding-left: 20px;
    font-size: 14px;
    font-weight: 700;
    div:first-child {
      height: 60%;
    }
    div:last-child {
      height: 88%;
      margin-top: 4px;
    }
    .col-tow-url {
      margin-top: 28px !important;
    }
    .col-tow-img {
      width: 80px;
      height: 90%;
      overflow: hidden;
      border-radius: 13px;
      box-shadow: 0px 0px 7px 2px #5d5b5b75;
    }
  }
}
</style>